<template>
    <div class="environmental-indicators-container">
        <v-chart class="chart" :option="option" style="height: 100%;" />
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

// 模拟数据
const option = ref({});
const setOption = () => {
    option.value = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            borderColor: 'rgba(124, 189, 207, 0.8)',
            textStyle: {
                color: '#ffffff'
            },
            formatter: function (params: any) {
                let result = params[0].name + '<br/>'
                params.forEach((item: any) => {
                    const unit = item.seriesName === '光伏瞬时功率' ? 'kW' :
                        item.seriesName === '发电量' ? 'MWh' : '张'
                    result += `${item.marker}${item.seriesName}: ${item.value}${unit}<br/>`
                })
                return result
            }
        },
        legend: {
            data: ['光伏瞬时功率', '发电量'],
            textStyle: {
                color: '#ffffff'
            },
            top: '5%'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                }
            },
            axisLabel: {
                color: '#ffffff',
                fontSize: 12,
                interval: 1,
            },
        },
        yAxis: [
            {
                type: 'value',
                name: '光伏瞬时功率(kw)',
                position: 'left',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#ffffff',
                    fontSize: 12
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)',
                        type: 'dashed'
                    }
                },
                nameTextStyle: {
                    color: '#7CBDCF',
                    fontSize: 12
                }
            },
            {
                type: 'value',
                name: '发电量(MWh)',
                position: 'right',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#ffffff',
                    fontSize: 12
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)',
                        type: 'dashed'
                    }
                },
                nameTextStyle: {
                    color: '#7CBDCF',
                    fontSize: 12
                }
            }

        ],
        series: [
            {
                name: '光伏瞬时功率',
                type: 'line',
                data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330, 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330, 310],
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                yAxisIndex: 0,
                lineStyle: {
                    color: '#7FFFAA',
                    width: 3
                },
                itemStyle: {
                    color: '#7FFFAA'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(127, 255, 170, 0.3)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(127, 255, 170, 0.05)'
                            }
                        ]
                    }
                },
                showSymbol: false,
            },
            {
                name: '发电量',
                type: 'line',
                data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410, 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410, 440],
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                yAxisIndex: 1,
                lineStyle: {
                    color: '#FFA500',
                    width: 3
                },
                itemStyle: {
                    color: '#FFA500'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(255,165,0, 0.3)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(255,165,0, 0.05)'
                            }
                        ]
                    }
                },
                showSymbol: false,
            }
        ]
    }
}

onMounted(() => {
    let timer = setTimeout(()=>{
        setOption();
        clearTimeout(timer)
    },1000)
    // 这里可以添加数据获取逻辑
})
</script>

<style lang="less" scoped>
.environmental-indicators-container {
    width: 100%;
    height: 100%;
    padding: 10px;

    .chart {
        width: 100%;
        height: 100%;

        :deep(.vue-echarts-inner) {
            div:nth-child(1) {
                height: 100% !important;
            }
        }
    }
}

.chart-container {
    flex: 1;
    height: 100%;

    .chart {
        width: 100%;
        height: 100%;

        :deep(.vue-echarts-inner) {
            div:nth-child(1) {
                height: 100% !important;
            }
        }
    }
}
</style>